ரியாக்டின் useFormState ஹூக்கைப் பயன்படுத்தி ஒரு வலுவான மற்றும் அளவிடக்கூடிய பல-கட்ட படிவ சரிபார்ப்பு பைப்லைனை எவ்வாறு செயல்படுத்துவது என்பதை அறிக. இந்த வழிகாட்டி அடிப்படை சரிபார்ப்பு முதல் மேம்பட்ட ஒத்திசைவற்ற காட்சிகள் வரை அனைத்தையும் உள்ளடக்கியது.
ரியாக்ட் useFormState சரிபார்ப்பு பைப்லைன்: பல-கட்ட படிவ சரிபார்ப்பில் தேர்ச்சி பெறுதல்
நவீன வலை மேம்பாட்டில் வலுவான சரிபார்ப்புடன் சிக்கலான படிவங்களை உருவாக்குவது ஒரு பொதுவான சவாலாகும். ரியாக்டின் useFormState ஹூக், படிவ நிலை மற்றும் சரிபார்ப்பை நிர்வகிக்க ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகிறது, இது அதிநவீன பல-கட்ட சரிபார்ப்பு பைப்லைன்களை உருவாக்க உதவுகிறது. இந்த விரிவான வழிகாட்டி, அடிப்படைகளைப் புரிந்துகொள்வதிலிருந்து மேம்பட்ட ஒத்திசைவற்ற சரிபார்ப்பு உத்திகளை செயல்படுத்துவது வரை உங்களை வழிநடத்தும்.
பல-கட்ட படிவ சரிபார்ப்பு ஏன் தேவை?
பாரம்பரிய, ஒற்றை-கட்ட படிவ சரிபார்ப்பு, குறிப்பாக எண்ணற்ற புலங்கள் அல்லது சிக்கலான சார்புகளைக் கொண்ட படிவங்களைக் கையாளும் போது, громоздким மற்றும் திறனற்றதாக மாறும். பல-கட்ட சரிபார்ப்பு உங்களை அனுமதிக்கிறது:
- பயனர் அனுபவத்தை மேம்படுத்துதல்: குறிப்பிட்ட படிவப் பிரிவுகளில் உடனடியாகக் கருத்தைத் தெரிவித்து, பயனர்களை நிறைவு செய்யும் செயல்முறையின் மூலம் மிகவும் திறம்பட வழிநடத்துங்கள்.
- செயல்திறனை அதிகரித்தல்: முழு படிவத்திலும் தேவையற்ற சரிபார்ப்புகளைத் தவிர்ப்பதன் மூலம், குறிப்பாக பெரிய படிவங்களுக்கு செயல்திறனை மேம்படுத்துங்கள்.
- குறியீடு பராமரிப்பை அதிகரித்தல்: சரிபார்ப்பு தர்க்கத்தை சிறிய, நிர்வகிக்கக்கூடிய அலகுகளாக உடைத்து, குறியீட்டைப் புரிந்துகொள்வதற்கும், சோதிப்பதற்கும், பராமரிப்பதற்கும் எளிதாக்குங்கள்.
useFormState-ஐப் புரிந்துகொள்ளுதல்
useFormState ஹூக் (பெரும்பாலும் react-use போன்ற லைப்ரரிகளில் அல்லது தனிப்பயன் செயலாக்கங்களில் கிடைக்கிறது) படிவ நிலை, சரிபார்ப்புப் பிழைகள் மற்றும் சமர்ப்பிப்பு கையாளுதலை நிர்வகிக்க ஒரு வழியை வழங்குகிறது. அதன் முக்கிய செயல்பாடுகள் பின்வருமாறு:
- நிலை மேலாண்மை: படிவப் புலங்களின் தற்போதைய மதிப்புகளைச் சேமிக்கிறது.
- சரிபார்ப்பு: படிவ மதிப்புகளுக்கு எதிராக சரிபார்ப்பு விதிகளை செயல்படுத்துகிறது.
- பிழை கண்காணிப்பு: ஒவ்வொரு புலத்துடன் தொடர்புடைய சரிபார்ப்புப் பிழைகளைக் கண்காணிக்கிறது.
- சமர்ப்பிப்பு கையாளுதல்: படிவத்தைச் சமர்ப்பிப்பதற்கும் சமர்ப்பிப்பு முடிவைக் கையாளுவதற்கும் வழிமுறைகளை வழங்குகிறது.
ஒரு அடிப்படை சரிபார்ப்பு பைப்லைனை உருவாக்குதல்
ஒரு எளிய இரண்டு-கட்ட படிவத்தின் உதாரணத்துடன் தொடங்குவோம்: தனிப்பட்ட தகவல் (பெயர், மின்னஞ்சல்) மற்றும் முகவரி தகவல் (தெரு, நகரம், நாடு).
படி 1: படிவ நிலையை வரையறுத்தல்
முதலில், அனைத்து புலங்களையும் உள்ளடக்கிய எங்கள் படிவத்தின் ஆரம்ப நிலையை வரையறுக்கிறோம்:
const initialFormState = {
firstName: '',
lastName: '',
email: '',
street: '',
city: '',
country: '',
};
படி 2: சரிபார்ப்பு விதிகளை உருவாக்குதல்
அடுத்து, எங்கள் சரிபார்ப்பு விதிகளை வரையறுக்கிறோம். இந்த எடுத்துக்காட்டிற்கு, அனைத்து புலங்களும் காலியாக இருக்கக்கூடாது மற்றும் மின்னஞ்சல் சரியான வடிவத்தில் இருப்பதை உறுதி செய்வோம்.
const validateField = (fieldName, value) => {
if (!value) {
return 'இந்த புலம் தேவை.';
}
if (fieldName === 'email' && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
return 'தவறான மின்னஞ்சல் வடிவம்.';
}
return null; // பிழை இல்லை
};
படி 3: useFormState ஹூக்கை செயல்படுத்துதல்
இப்போது, எங்கள் ரியாக்ட் காம்போனென்டில் (கருத்தியலான) useFormState ஹூக்கைப் பயன்படுத்தி சரிபார்ப்பு விதிகளை ஒருங்கிணைப்போம்:
import React, { useState } from 'react';
// react-use போன்ற ஒரு தனிப்பயன் செயலாக்கம் அல்லது லைப்ரரியை அனுமானித்து
const useFormState = (initialState) => {
const [values, setValues] = useState(initialState);
const [errors, setErrors] = useState({});
const handleChange = (event) => {
const { name, value } = event.target;
setValues({ ...values, [name]: value });
// சிறந்த பயனர் அனுபவத்திற்காக மாற்றத்தின் மீது சரிபார்க்கவும் (விருப்பத்தேர்வு)
setErrors({ ...errors, [name]: validateField(name, value) });
};
const validateFormStage = (fields) => {
const newErrors = {};
let isValid = true;
fields.forEach(field => {
const error = validateField(field, values[field]);
if (error) {
newErrors[field] = error;
isValid = false;
}
});
setErrors({...errors, ...newErrors}); // ஏற்கனவே உள்ள பிழைகளுடன் ஒன்றிணைக்கவும்
return isValid;
};
const clearErrors = (fields) => {
const newErrors = {...errors};
fields.forEach(field => delete newErrors[field]);
setErrors(newErrors);
};
return {
values,
errors,
handleChange,
validateFormStage,
clearErrors,
};
};
const MyForm = () => {
const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
const [currentStage, setCurrentStage] = useState(1);
const handleNextStage = () => {
let isValid;
if (currentStage === 1) {
isValid = validateFormStage(['firstName', 'lastName', 'email']);
} else {
isValid = validateFormStage(['street', 'city', 'country']);
}
if (isValid) {
setCurrentStage(currentStage + 1);
}
};
const handlePreviousStage = () => {
if(currentStage > 1){
if(currentStage === 2){
clearErrors(['firstName', 'lastName', 'email']);
} else {
clearErrors(['street', 'city', 'country']);
}
setCurrentStage(currentStage - 1);
}
};
const handleSubmit = (event) => {
event.preventDefault();
const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
if (isValid) {
// படிவத்தைச் சமர்ப்பிக்கவும்
console.log('படிவம் சமர்ப்பிக்கப்பட்டது:', values);
alert('படிவம் சமர்ப்பிக்கப்பட்டது!'); // உண்மையான சமர்ப்பிப்பு தர்க்கத்துடன் மாற்றவும்
} else {
console.log('படிவத்தில் பிழைகள் உள்ளன, தயவுசெய்து அவற்றை சரிசெய்யவும்.');
}
};
return (
);
};
export default MyForm;
படி 4: கட்ட வழிசெலுத்தலை செயல்படுத்துதல்
படிவத்தின் தற்போதைய கட்டத்தை நிர்வகிக்க நிலை மாறிகளைப் பயன்படுத்தவும் மற்றும் தற்போதைய கட்டத்தின் அடிப்படையில் பொருத்தமான படிவப் பிரிவை வழங்கவும்.
மேம்பட்ட சரிபார்ப்பு நுட்பங்கள்
ஒத்திசைவற்ற சரிபார்ப்பு
சில நேரங்களில், சரிபார்ப்புக்கு ஒரு சேவையகத்துடன் தொடர்பு தேவைப்படுகிறது, அதாவது ஒரு பயனர்பெயர் கிடைக்கிறதா என்பதைச் சரிபார்ப்பது போன்றவை. இது ஒத்திசைவற்ற சரிபார்ப்பை அவசியமாக்குகிறது. அதை எவ்வாறு ஒருங்கிணைப்பது என்பது இங்கே:
const validateUsername = async (username) => {
try {
const response = await fetch(`/api/check-username?username=${username}`);
const data = await response.json();
if (data.available) {
return null; // பயனர்பெயர் கிடைக்கிறது
} else {
return 'பயனர்பெயர் ஏற்கனவே எடுக்கப்பட்டது.';
}
} catch (error) {
console.error('பயனர்பெயரைச் சரிபார்ப்பதில் பிழை:', error);
return 'பயனர்பெயரைச் சரிபார்ப்பதில் பிழை. மீண்டும் முயற்சிக்கவும்.'; // நெட்வொர்க் பிழைகளை மென்மையாக கையாளவும்
}
};
const useFormStateAsync = (initialState) => {
const [values, setValues] = useState(initialState);
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (event) => {
const { name, value } = event.target;
setValues({ ...values, [name]: value });
};
const validateFieldAsync = async (fieldName, value) => {
if (fieldName === 'username') {
return await validateUsername(value);
}
return validateField(fieldName, value);
};
const handleSubmit = async (event) => {
event.preventDefault();
setIsSubmitting(true);
let newErrors = {};
let isValid = true;
for(const key in values){
const error = await validateFieldAsync(key, values[key]);
if(error){
newErrors[key] = error;
isValid = false;
}
}
setErrors(newErrors);
setIsSubmitting(false);
if (isValid) {
// படிவத்தைச் சமர்ப்பிக்கவும்
console.log('படிவம் சமர்ப்பிக்கப்பட்டது:', values);
alert('படிவம் சமர்ப்பிக்கப்பட்டது!'); // உண்மையான சமர்ப்பிப்பு தர்க்கத்துடன் மாற்றவும்
} else {
console.log('படிவத்தில் பிழைகள் உள்ளன, தயவுசெய்து அவற்றை சரிசெய்யவும்.');
}
};
return {
values,
errors,
handleChange,
handleSubmit,
isSubmitting //விருப்பத்தேர்வு: சரிபார்ப்பின் போது ஏற்றுதல் செய்தியைக் காண்பிக்கவும்
};
};
இந்த எடுத்துக்காட்டு, பயனர்பெயர் கிடைப்பதைச் சரிபார்க்க API அழைப்பைச் செய்யும் ஒரு validateUsername செயல்பாட்டை உள்ளடக்கியுள்ளது. சாத்தியமான நெட்வொர்க் பிழைகளைக் கையாண்டு, பயனருக்குப் பொருத்தமான கருத்தைத் தெரிவிக்கவும்.
நிபந்தனைக்குட்பட்ட சரிபார்ப்பு
சில புலங்களுக்கு மற்ற புலங்களின் மதிப்பின் அடிப்படையில் மட்டுமே சரிபார்ப்பு தேவைப்படலாம். எடுத்துக்காட்டாக, பயனர் பணியில் இருப்பதாகக் குறிப்பிட்டால் மட்டுமே "நிறுவனத்தின் இணையதளம்" புலம் தேவைப்படலாம். உங்கள் சரிபார்ப்பு செயல்பாடுகளுக்குள் நிபந்தனைக்குட்பட்ட சரிபார்ப்பைச் செயல்படுத்தவும்:
const validateFieldConditional = (fieldName, value, formValues) => {
if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
return 'நீங்கள் பணியில் இருந்தால் நிறுவனத்தின் இணையதளம் தேவை.';
}
return validateField(fieldName, value); // அடிப்படை சரிபார்ப்புக்கு அனுப்பவும்
};
டைனமிக் சரிபார்ப்பு விதிகள்
சில நேரங்களில், சரிபார்ப்பு விதிகளே வெளிப்புற காரணிகள் அல்லது தரவுகளின் அடிப்படையில் டைனமிக்காக இருக்க வேண்டும். உங்கள் சரிபார்ப்பு செயல்பாடுகளுக்கு டைனமிக் சரிபார்ப்பு விதிகளை ஆர்கியுமென்ட்களாக அனுப்புவதன் மூலம் இதை அடையலாம்:
const validateFieldWithDynamicRules = (fieldName, value, rules) => {
if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
return `இந்த புலம் ${rules[fieldName].maxLength} எழுத்துக்களுக்கு குறைவாக இருக்க வேண்டும்.`;
}
return validateField(fieldName, value); // அடிப்படை சரிபார்ப்புக்கு அனுப்பவும்
};
பிழை கையாளுதல் மற்றும் பயனர் அனுபவம்
ஒரு நேர்மறையான பயனர் அனுபவத்திற்கு பயனுள்ள பிழை கையாளுதல் முக்கியமானது. பின்வருவனவற்றைக் கருத்தில் கொள்ளுங்கள்:
- பிழைகளைத் தெளிவாகக் காண்பித்தல்: தொடர்புடைய உள்ளீட்டு புலங்களுக்கு அருகில் பிழைச் செய்திகளை வைக்கவும். தெளிவான மற்றும் சுருக்கமான மொழியைப் பயன்படுத்தவும்.
- நிகழ்நேர சரிபார்ப்பு: பயனர் தட்டச்சு செய்யும் போது புலங்களைச் சரிபார்த்து, உடனடியாகக் கருத்தைத் தெரிவிக்கவும். செயல்திறன் தாக்கங்களைக் கவனத்தில் கொள்ளுங்கள்; தேவைப்பட்டால் சரிபார்ப்பு அழைப்புகளை டிபவுன்ஸ் அல்லது த்ராட்டில் செய்யவும்.
- பிழைகளில் கவனம் செலுத்துதல்: சமர்ப்பித்த பிறகு, ஒரு பிழையுடன் முதல் புலத்தில் பயனரின் கவனத்தை ஈர்க்கவும்.
- அணுகல்தன்மை: ARIA பண்புக்கூறுகள் மற்றும் சொற்பொருள் HTML ஐப் பயன்படுத்தி, குறைபாடுகள் உள்ள பயனர்களுக்கு பிழைச் செய்திகள் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும்.
- சர்வதேசமயமாக்கல் (i18n): பயனரின் விருப்பமான மொழியில் பிழைச் செய்திகளைக் காண்பிக்க சரியான சர்வதேசமயமாக்கலைச் செயல்படுத்தவும். i18next அல்லது நேட்டிவ் ஜாவாஸ்கிரிப்ட் Intl API போன்ற சேவைகள் உதவலாம்.
பல-கட்ட படிவ சரிபார்ப்பிற்கான சிறந்த நடைமுறைகள்
- சரிபார்ப்பு விதிகளைச் சுருக்கமாக வைத்திருங்கள்: சிக்கலான சரிபார்ப்பு தர்க்கத்தை சிறிய, மீண்டும் பயன்படுத்தக்கூடிய செயல்பாடுகளாக உடைக்கவும்.
- முழுமையாகச் சோதிக்கவும்: உங்கள் சரிபார்ப்பு விதிகளின் துல்லியம் மற்றும் நம்பகத்தன்மையை உறுதிப்படுத்த யூனிட் சோதனைகளை எழுதவும்.
- ஒரு சரிபார்ப்பு லைப்ரரியைப் பயன்படுத்தவும்: செயல்முறையை எளிதாக்கவும் மற்றும் குறியீட்டின் தரத்தை மேம்படுத்தவும் ஒரு பிரத்யேக சரிபார்ப்பு லைப்ரரியை (எ.கா., Yup, Zod) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இந்த லைப்ரரிகள் பெரும்பாலும் ஸ்கீமா அடிப்படையிலான சரிபார்ப்பை வழங்குகின்றன, இது சிக்கலான சரிபார்ப்பு விதிகளை வரையறுப்பதற்கும் நிர்வகிப்பதற்கும் எளிதாக்குகிறது.
- செயல்திறனை மேம்படுத்துதல்: தேவையற்ற சரிபார்ப்புகளைத் தவிர்க்கவும், குறிப்பாக நிகழ்நேர சரிபார்ப்பின் போது. சரிபார்ப்பு முடிவுகளை கேச் செய்ய மெமோயிசேஷன் நுட்பங்களைப் பயன்படுத்தவும்.
- தெளிவான வழிமுறைகளை வழங்கவும்: தெளிவான வழிமுறைகள் மற்றும் பயனுள்ள குறிப்புகளுடன் படிவத்தை நிறைவு செய்யும் செயல்முறையின் மூலம் பயனர்களை வழிநடத்துங்கள்.
- முற்போக்கான வெளிப்பாட்டைக் கருத்தில் கொள்ளுங்கள்: ஒவ்வொரு கட்டத்திற்கும் தொடர்புடைய புலங்களை மட்டுமே காண்பித்து, படிவத்தை எளிதாக்கி, அறிவாற்றல் சுமையைக் குறைக்கவும்.
மாற்று லைப்ரரிகள் மற்றும் அணுகுமுறைகள்
இந்த வழிகாட்டி ஒரு தனிப்பயன் useFormState ஹூக்கில் கவனம் செலுத்தினாலும், பல சிறந்த படிவ லைப்ரரிகள் உள்ளன, அவை இதே போன்ற செயல்பாடுகளை வழங்குகின்றன, பெரும்பாலும் கூடுதல் அம்சங்கள் மற்றும் செயல்திறன் மேம்படுத்தல்களுடன். சில பிரபலமான மாற்று வழிகள் பின்வருமாறு:
- Formik: ரியாக்டில் படிவ நிலை மற்றும் சரிபார்ப்பை நிர்வகிக்க பரவலாகப் பயன்படுத்தப்படும் ஒரு லைப்ரரி. இது படிவ கையாளுதலுக்கு ஒரு அறிவிப்பு அணுகுமுறையை வழங்குகிறது மற்றும் பல்வேறு சரிபார்ப்பு உத்திகளை ஆதரிக்கிறது.
- React Hook Form: கட்டுப்பாடற்ற காம்போனென்ட்கள் மற்றும் ரியாக்டின் ref API ஐப் பயன்படுத்தி மறு-ரெண்டர்களைக் குறைக்கும் ஒரு செயல்திறன்-மையப்படுத்தப்பட்ட லைப்ரரி. இது பெரிய மற்றும் சிக்கலான படிவங்களுக்கு சிறந்த செயல்திறனை வழங்குகிறது.
- Final Form: பல்வேறு UI கட்டமைப்புகள் மற்றும் சரிபார்ப்பு லைப்ரரிகளை ஆதரிக்கும் ஒரு பல்துறை லைப்ரரி. இது படிவ நடத்தையைத் தனிப்பயனாக்க ஒரு நெகிழ்வான மற்றும் விரிவாக்கக்கூடிய API ஐ வழங்குகிறது.
சரியான லைப்ரரியைத் தேர்ந்தெடுப்பது உங்கள் குறிப்பிட்ட தேவைகள் மற்றும் விருப்பங்களைப் பொறுத்தது. உங்கள் முடிவை எடுக்கும்போது செயல்திறன், பயன்பாட்டின் எளிமை மற்றும் அம்சத் தொகுப்பு போன்ற காரணிகளைக் கருத்தில் கொள்ளுங்கள்.
சர்வதேசக் கருத்தாய்வுகள்
உலகளாவிய பார்வையாளர்களுக்காக படிவங்களை உருவாக்கும்போது, சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கலைக் கருத்தில் கொள்வது அவசியம். இங்கே சில முக்கிய அம்சங்கள்:
- தேதி மற்றும் நேர வடிவங்கள்: நிலைத்தன்மையை உறுதிப்படுத்தவும் குழப்பத்தைத் தவிர்க்கவும் வட்டார-குறிப்பிட்ட தேதி மற்றும் நேர வடிவங்களைப் பயன்படுத்தவும்.
- எண் வடிவங்கள்: நாணய சின்னங்கள் மற்றும் தசமப் பிரிப்பான்கள் உட்பட, வட்டார-குறிப்பிட்ட எண் வடிவங்களைப் பயன்படுத்தவும்.
- முகவரி வடிவங்கள்: வெவ்வேறு நாட்டு வடிவங்களுக்கு முகவரி புலங்களைத் தழுவவும். சில நாடுகளுக்கு நகரங்களுக்கு முன் அஞ்சல் குறியீடுகள் தேவைப்படலாம், மற்றவற்றில் அஞ்சல் குறியீடுகள் இல்லாமலும் இருக்கலாம்.
- தொலைபேசி எண் சரிபார்ப்பு: சர்வதேச தொலைபேசி எண் வடிவங்களை ஆதரிக்கும் ஒரு தொலைபேசி எண் சரிபார்ப்பு லைப்ரரியைப் பயன்படுத்தவும்.
- எழுத்துக்குறி குறியாக்கம்: உங்கள் படிவம் யூனிகோட் மற்றும் பிற லத்தீன் அல்லாத எழுத்துக்கள் உட்பட வெவ்வேறு எழுத்துத் தொகுப்புகளைச் சரியாகக் கையாள்வதை உறுதிசெய்யவும்.
- வலமிருந்து இடமாக (RTL) தளவமைப்பு: அரபு மற்றும் ஹீப்ரு போன்ற RTL மொழிகளைப் படிவத் தளவமைப்பை அதற்கேற்ப மாற்றுவதன் மூலம் ஆதரிக்கவும்.
இந்த சர்வதேச அம்சங்களைக் கருத்தில் கொள்வதன் மூலம், உலகளாவிய பார்வையாளர்களுக்கு அணுகக்கூடிய மற்றும் பயனர் நட்பு படிவங்களை நீங்கள் உருவாக்கலாம்.
முடிவுரை
ரியாக்டின் useFormState ஹூக் (அல்லது மாற்று லைப்ரரிகள்) மூலம் ஒரு பல-கட்ட படிவ சரிபார்ப்பு பைப்லைனைச் செயல்படுத்துவது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தலாம், செயல்திறனை அதிகரிக்கலாம் மற்றும் குறியீடு பராமரிப்பை அதிகரிக்கலாம். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள முக்கிய கருத்துக்களைப் புரிந்துகொண்டு சிறந்த நடைமுறைகளைப் பயன்படுத்துவதன் மூலம், நவீன வலைப் பயன்பாடுகளின் தேவைகளைப் பூர்த்தி செய்யும் வலுவான மற்றும் அளவிடக்கூடிய படிவங்களை நீங்கள் உருவாக்கலாம்.
பயனர் அனுபவத்திற்கு முன்னுரிமை அளிக்கவும், முழுமையாகச் சோதிக்கவும், உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப உங்கள் சரிபார்ப்பு உத்திகளை மாற்றியமைக்கவும் நினைவில் கொள்ளுங்கள். கவனமான திட்டமிடல் மற்றும் செயலாக்கத்துடன், செயல்பாட்டு மற்றும் பயன்படுத்த மகிழ்ச்சியான படிவங்களை நீங்கள் உருவாக்கலாம்.